<!--宽度100%并且轮播内容可能是视频可能是图片-->
<template>
    <div class="img-and-video">
        <div class="small">
            <div id="noDataWrap" v-if="swiperContent.list && swiperContent.list.length == 0"
                class="no-data-wrap displayFlex flexCenter">
                <no-data v-if="nodata" :noDataProps="{text:'暂无内容哦～'}"></no-data>
            </div>
            <div v-else-if="swiperContent.list && swiperContent.list.length > 0">
                <swiper :options="swiperOption" class="swiper-wrap" id="mySwiper" ref="mySwiper" style="height: 100vh;">
                    <swiper-slide :key="index" class="swiper-item-wrap" ref="swiperItem" style="height: 100vh;"
                        v-for="(swiperItem,index) in swiperContent.list"
                        v-if="swiperContent.pageSize > index && !swiperContent.notShow">
                        <div class="look-index-mood">
                            <!--用户-->
                            <header-msg v-if="swiperContent.headerMsg" ref="refHeader"
                                :headerProp="getHeaderItem(swiperItem,index)" :discountList="discountList"
                                @clickHeaderImg="clickHeaderImg" @doAttention="doAttention" @clickTitle="clickTitle"
                                @showShare="$emit('showShare')"></header-msg>
                            <!--用户评论等操作-->
                            <user-handle-icons ref="shareCollectSpeak"
                                v-if="rtCommontList && rtCommontList.length > 0 && userHandleIconsShow"
                                :commentListProps="commentListProps" :rtCommontProps="rtCommontList[index]"
                                :discountList="discountList" @isNotAutoplay="isNotAutoplayFn"
                                @getUserMainComment="getUserMainComment" @getSubCommentList="getSubCommentList"
                                @doComment="doComment" @isLike="isLike" @showShare="$emit('showShare')"
                                @isShowHomeTap="isShowHomeTap"></user-handle-icons>
                        </div>
                        <!--头部的header-->
                        <!--<medio-header></medio-header>-->
                        <!--视频-->
                        <!--要求最后一个自动播放，所以需要 swiperContent.list.length == index + 1 ? true : isNotAutoplay -->
                        <full-height-video ref="fullVideo"
                            v-if="swiperItem.mediaType == 0  && swiperItem.mediaContents && swiperItem.mediaContents.length > 0 "
                            :data-videoIndex="index" :videoPropsMsg="medioMsg[index]"
                            :isNotAutoplay="swiperContent.list.length == index + 1 ? true : isNotAutoplay"
                            @playEndFn="nextSwiperSlide">
                        </full-height-video>
                        <!--swiperImg-->
                        <full-height-swiper
                            v-else-if="swiperItem.mediaType == 1 && swiperItem.mediaContents && swiperItem.mediaContents.length > 0"
                            :data-imgIndex="index" ref="fullSwiper" :swiperOptionProp="{autoplay:3000}"
                            :FHSwiperMsg="medioMsg[index]" @change-end-cb="changeEndCb" @lastSlide="nextSwiperSlide">
                        </full-height-swiper>
                        <!--实景图(单张)-->
                        <div
                            v-else-if="swiperItem.mediaType == 2 && swiperItem.mediaContents && swiperItem.mediaContents.length > 0">
                            <full-pamprama :panoramaMsgProps="swiperItem.mediaContents[0]"></full-pamprama>
                        </div>
                        <div
                            v-else-if="swiperItem.mediaType == 3  && swiperItem.mediaContents && swiperItem.mediaContents.length > 0">
                            <video-panorama ref="videoPanorama"
                                :videoPanoramaProps="dealVideoPanorama( swiperItem.mediaContents[0],swiperItem )"
                                :videoPanoramaMsgProps="dealVideoPanoramaMsg(swiperItem )"></video-panorama>
                        </div>
                        <!--侧边悬浮模块-->
                        <transition name="suspension" :duration="{leave:1000}" leave-active-class="animated zoomOut">
                            <fc-suspension v-show="swiperItem.templateTickets || (swiperItem.actType == 5)"
                                ref="fcSuspension" :suspensionProps="suspensionDeal(swiperItem)"
                                @animationCb="animationCb(swiperItem,index)"></fc-suspension>
                        </transition>
                        <!--优惠券-->
                        <coupons-v1 ref="coupons"
                            v-if="couponsList[index] && couponsList[index].isShow && Array.isArray(swiperItem.templateTickets) && swiperItem.templateTickets.length > 0"
                            :couponsProps="couponsList[index].couponsProps" @refresh="$emit('getPageMsg')"
                            @showSuspensionFn="showSuspensionFn(index)" @suspensionCb="suspensionCb(index)"
                            @getAllCounponsFn="getAllCounponsFn" @getTemplate="getTemplate"></coupons-v1>
                        <!--红包-->
                        <get-red-alert ref="getRedAlert"
                            v-if="swiperItem.packetInfo && couponsList[index] && couponsList[index].couponsProps && couponsList[index].isShow"
                            :getRedProps="couponsList[index].couponsProps" @showRedAlert="showRedAlert"
                            @sharePage="$emit('showShare')" @openRedPage="openRedPage">
                        </get-red-alert>
                        <!-- 红包营销模块 -->
                        <!-- swiperItem.packetInfo.welPacketType = 4 是手气红包 -->
                        <Red-envelope
                            v-if="swiperItem.redPacketInfo && swiperItem.redPacketInfo.welPacketType == '4' && redIcon && !swiperItem.redPacketInfo.hadReceived"
                            @click.native="newRed(swiperItem)" ref="shake">
                        </Red-envelope>
                        <!-- <new-red-alert
                                ref="newRedAlert"
                                v-if="swiperItem.packetInfo && $store.state.redAlert"
                                :title='swiperItem.packetInfo.title'
                        >
                        </new-red-alert> -->
                        <!--估价活动-->
                        <div class="appraise-box width-full"
                            v-if="swiperItem.actType == 5 && swiperItem.actInfo && swiperItem.actInfo.subActType == 5">
                            <appraise-act ref="appraiseAct" :swiperItem="swiperItem" @showAppraise="showAppraise"
                                @forbidSwiper="forbidSwiper" @doAppraise="doAppraise" @inputFocus="inputFocus"
                                @showShare="$emit('showShare')">
                            </appraise-act>
                        </div>
                        <!--<goods-box v-if="storeGoodsBoxList[key] && storeGoodsBoxList[key].isShow"-->
                        <!--@closeGoodsBox="closeGoodsBox(key)"-->
                        <!--:goodsBoxProp="storeGoodsBoxList[key].storeGoodsBoxMsg"-->
                        <!--&gt;</goods-box>-->
                        <!--<v-themes></v-themes>-->
                        <!--互动-->
                        <v-themes v-if="swiperItem.interactModel" :interactProp="interactModelFn(swiperItem)">
                        </v-themes>
                        <!--互动的话题活动,好看、好玩都有 promotionFloats-->
                        <topic-act
                            v-if="(swiperItem.interactModel && swiperItem.interactModel.interactType == 6) || ( swiperItem.actType == 5 && swiperItem.actInfo && swiperItem.actInfo.subActType == 6 )"
                            ref="topic" :swiperItem="getHeaderItem(swiperItem,index)" @clickTitle="clickTitle"
                            @showAppraise="showPrizeTopic" @showShare="$emit('showShare')">
                        </topic-act>
                        <bottom-suspension v-if="swiperItem && swiperItem.bottomSuspension"
                            :bottomSuspensionProp="swiperItem.bottomSuspension"
                            @showMarsterDetail="$emit('showMarsterDetail')" @showMarsterClassify="showMarsterClassify">
                        </bottom-suspension>
                        <slot name="swiperIn" :swiperItem="swiperItem" :index="index"></slot>
                        <wx-share-body v-if="swiperIndex == index" :storeId="storeId" @wxShareCb="wxShareCb">
                        </wx-share-body>
                    </swiper-slide>
                    <!--<div v-if="swiperOption.showPagination" class="swiper-pagination" slot="pagination"></div>-->
                </swiper>
                <slot name="swiperOut"></slot>
            </div>
        </div>
    </div>

</template>

<script>
import FullHeightVideo from "../video/FullHeightVideo";
import VideoPanorama from "../../commonComponents/panorama/video/VideoPanorama";
import common from "../../../components/commonMethods/common";
import XLocation from "../../../x/XLocation";
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import { mapState, mapMutations, mapActions } from 'vuex'

common.iosAutoplay();
export default {
    name: "FullImgVideoSwiper",
    props: {
        swiperContentProp: {
            type: Object
        },
        swiperMsgProp: {
            type: Object
        },
        // rtCommontPropsChange:{
        //     type:Object
        // },
        rtCommontListProps: {
            type: Array
        },
        commentListProps: {
            type: Object
        },
        discountList: Array,
        couponsListProp: Array,
        interactProp: Object
    },
    data () {
        return {
            storeId: '',
            redIcon: true, //商家页面不显示红包按钮
            videoIndex: 0,//有红包的视频数组索引
            timeAll: 0, //红包进度的速度
            imgTimeOut: null, //红包是图片的时候的定时器
            timeOut: null, //定时器
            mediaId: "",
            nodata: false,
            swiperContent: {
                initialSlide: 0, //初始化显示swiperIndex
                headerMsg: "",
                isPlaySinline: true, //是否不全屏
                autoplay: true, //自动播放，视屏的时候有
                hasPromotion: false, //是否有推广
                hasHeader: false, //是否有头部商铺/跟人信息
                hasCart: false, //是否有购物车
                commentType: 1, //评论魔板
                storeGoodsBoxList: [] /*@storeGoodsBoxList商品悬浮的小框的信息*/,
                showHeader: false, //头像模块
                isShowAlert: false, //弹出框的展示
                pageSize: this.swiperContentProp.pageSize || 5, //一次性拉取的好玩页面的数据条数
                observer: true,
                observeParents: true,
                list: [
                    //     {
                    //     itemId: 0,//商品id
                    //     mediaId: 0,//媒体或者推广id
                    //     mediaType: 0,//0表示视频，1表示图片
                    //     mediaContents: [{
                    //         url: ''//图片地址或者视频地址
                    //     }],
                    //     "backMusic": {                                                       //------图片音乐模型,没有则为null  ++20190401++
                    //         "musicId": 1,                                                    //----音乐id
                    //         "name": "违背的青春",                                           //----歌曲名称
                    //         "author": "薛之谦",                                             //----作家
                    //         "poster": "https://oss.pg.yibaotong.top/system/music/bb.jpg",   //----海报图
                    //         "url": "https://oss.pg.yibaotong.top/system/aaa.mp3",           //----歌曲链接
                    //         "timeLength": 336                                               //----时间长度(秒)
                    //     },
                    //     poster: '',//海报图，视屏的时候有
                    //     hasWelPacket: false,//---------是否有发放中的福利红包
                    //     welPacketId: 0,//福利红包信息ID
                    //     "packetInfo": {                          //--------福利红包具体信息  ++20190325++
                    //         "welPacketId": 0,                    //--------红包ID
                    //         "title": "",
                    //         "welPacketType": 0,                 //--------红包类型  0-普通红包   1-助力红包   2-成长红包
                    //         "lastTimeMillis": 0,                //----------剩余时间毫秒数（助力红包才有用）
                    //         "invitedNum": 0,                    //----------已邀请人数（助力红包才有用）
                    //         "waitInvitedNum": 0,                //----------待邀请人数（助力红包才有用）
                    //         "packetReceiverId": 0,              //----------当前用户的红包领取信息（团）ID
                    //         "showReceivedAmount": false,        //----------是否显示已领金额
                    //         "receivedAmount": "0",              //----------已领金额
                    //         "canReceive": false,                //----------是否领取按钮可点击
                    //         "canReceiveAmount": 0,              //----------可领金额（普通红包不显示）
                    //         "packetHelpers": [
                    //             {
                    //                 "userId": 0,
                    //                 "photo": "",
                    //                 "amount": "0",           //-----------帮助金额(增长红包才有用)
                    //             }
                    //         ]
                    //     },
                    //     "hasTicket": false,                  //----------是否有发放中的优惠券
                    //     "ticketTemplateIds": [],     //----------优惠券模板ID
                    //     "templateTickets": [                   //----------优惠券模板模型列表   ++20190325++
                    //         {
                    //             "templateTicketId": 0,              //----券模板id
                    //             "logo": "",          //----优惠券显示的logo，现即为店铺logo
                    //             "type": 0,                            //----@券类型
                    //             "state": 0,                           //----@券模板状态
                    //             "scope": "",                //----使用范围
                    //             "validTimeType": 0,                   //----@有效期时间类型
                    //             "startTime": 0,           //----生效时间
                    //             "endTime": 0,              //----结束时间
                    //             "delayDay": "0",                  //-- 领取后第几天生效
                    //             "validDay": "0",                   //-- 有效时间
                    //             "condition": {                        //----@券模板条件
                    //             }
                    //         }
                    //     ],
                    //     "hasActivity": false,//------是否有活动
                    //     "actType": 0, //------活动类型： 1.单件活动 2.商圈活动 3.联合活动 5.互动活动
                    //     "actKey":111,
                    //     "iconPhotoUrl": "", //--------左下脚的icon图标
                    //     "belongStoreInfo": {                    //----所属店铺信息
                    //         "storeId": 106,
                    //         "name": "传世金玉",
                    //         "logo": "https://ff.jpg",
                    //         "concerned": false,                     //----是否关注
                    //         "industry": "珠宝",                       //----所属行业
                    //         "longitude": 22.564491271972656,
                    //         "latitude": 114.0173568725586
                    //     },
                    //     "promotionId": 46,                          //----推广ID
                    //     "welPacketIco": {                           //----福利红包图标信息            ++20190830++
                    //         "icoTag": "wel_packet#normal",              //----图标标识
                    //         "openUrl": "https://xx/w.png",              //----图标(开)链接
                    //         "closeUrl": null                            //----图标(关)链接
                    //     },
                    //     "ticketIco": {                              //----券图标信息             ++20190830++
                    //         "icoTag": "ticket#normal",                  //----图标标识
                    //         "openUrl": "https://xx/a.png",              //----图标(开)链接
                    //         "closeUrl": null                            //----图标(关)链接
                    //     },
                    //     "actKey": 111,                              //----对应活动类型的活动id
                    //     "actTitle": "乐昌好看好玩卡",                    //----活动标题                    ++20190830++
                    //     "actUrl": "http://xx/act/circle/x",         //----活动链接                    ++20190830++
                    //     "actIco": {                                 //----活动图标信息              ++20190830++
                    //         "icoTag": "act#normal",                     //----图标标识
                    //         "openUrl": "https://xx/ac.png",             //----图标(开)链接
                    //         "closeUrl": null                            //----图标(关)链接
                    //     },
                    //     "shareBodyInfo": {
                    //         content: '',//----分享内容
                    //         link: '',//----分享链接
                    //         photo: '',//----分享图片
                    //         title: '',//----分享标题
                    //     }
                    // }
                ]
            },
            userHandleIconsShow: true, //是否展示评论部分
            swiperIndex: 0, //当前swiper切换到的index
            swiperTimerout: null, //每次swiper切换之后swiperTimeout都先清除
            medioMsg: [],
            couponsList: [],
            isNotAutoplay: false,
            rtCommontList: [],
            // swiperTransformRemember:'',
            swiperOption: {
                initialSlide: this.swiperContentProp.initialSlide || 0,
                direction: "vertical",
                // updateOnImagesReady : true,
                showPagination: false,
                // autoHeight:true,//这里不能autoHeight 要不然会产生安卓输入框顶起页面混乱的问题
                autoplay: false,
                // observer: true,
                // observeParents: true,
                touchMoveStopPropagation: true, //true时阻止touchmove冒泡事件。
                // autoplayDisableOnInteraction: true,
                fade: {
                    /*配合onTransitionEnd解决滑动之后有时不触发slide结束的bug*/
                    crossFade: true
                },
                onInit: function (swiper) {
                    this.getredEnvelopeData(swiper.activeIndex);
                    this.getProgressBar(swiper);// 计算红包与视频的进度条
                    this.swiperIndex = swiper.activeIndex;
                    setTimeout(() => {
                        this.swiperSlideEnd(swiper.activeIndex, true);
                    }, 600);
                    setTimeout(() => {
                        this.currentUserStoreDiscount();
                    }, 50)
                }.bind(this),
                // swiper从当前slide开始过渡到另一个slide时执行
                onSlideChangeStart: function () {
                    if (this.timeOut) {
                        clearInterval(this.timeOut);
                    }
                    $("video").each(function (index, ele) {
                        $("video")
                            .eq(index)[0]
                            .pause();
                    });
                }.bind(this),
                // 过渡开始时触发
                onTransitionStart: function () {
                    if (this.timeOut) {
                        clearInterval(this.timeOut);
                    }
                    if (this.imgTimeOut) {
                        clearTimeout(this.imgTimeOut)
                    }
                }.bind(this),
                // 过渡结束时触发，接收Swiper实例作为参数。
                onTransitionEnd: function (swiper) {
                    if (this.$refs.fullVideo && this.$refs.fullVideo[this.videoIndex]) {
                        this.$refs.fullVideo[this.videoIndex].$refs.video.currentTime = 0 //每次滑动清除上个视频的播放时间
                    }
                    // if (this.imgTimeOut) {
                    //     clearTimeout(this.imgTimeOut)
                    // }
                    this.getProgressBar(swiper);// 计算红包与视频的进度条
                    let that = this;
                    this.toSwiperIndex(swiper.activeIndex, false)
                    let tempObj = {
                        index: swiper.activeIndex
                    }
                    this.$emit('onTransitionEnd', tempObj)
                }.bind(this),
                onSlidePrevEnd: function () {
                    this.isNotAutoplay = true;
                }.bind(this),
                onSlideNextEnd: function () {
                    setTimeout(() => {
                        this.isNotAutoplay = false;
                        //单独对大师进行处理
                        if (this.$route.path.includes('/store/master/')) {
                            this.isNotAutoplay = true;
                        }
                    }, 100);
                }.bind(this)
            }
        };
    },
    computed: {
        ...mapState({
            redEnvelopeData: state => state.redEnvelopeData,
        })
    },
    mounted () {
        // console.log(this.redEnvelopeData.storeId, 'this.redEnvelopeData.storeId');

        //单独对大师进行处理
        if (this.$route.path.includes('/store/master/')) {
            this.isNotAutoplay = true;
        }
        if (this.$route.fullPath.indexOf("/store") !== -1) {
            this.redIcon = false
        }
        let that = this;
        if (
            Array.isArray(this.couponsListProp) &&
            this.couponsListProp.length > 0
        ) {
            this.couponsListProp.forEach((value, index) => {
                this.couponsList.splice(index, 1, value);
            });
        }
        this.swiperContent = Object.assign(
            {},
            this.swiperContent,
            this.swiperContentProp
        );
        this.nodata = false;
        setTimeout(() => {
            this.nodata = true;
        }, 20)
        this.rtCommontList = this.rtCommontListProps;
        this.init();
    },
    methods: {
        ...mapMutations(['currentUserStoreDiscount', 'getStoreMenuId']),
        ...mapActions(['setStoreMenuId']),
        // 营销红包逻辑开始
        // 计算红包与视频的进度条
        getProgressBar (swiper) {
            if (this.$route.path.indexOf('/home') > -1) {
                this.timeAll = 0;
                this.$store.commit("setTimeAll", this.timeAll);
                // 总时间
                let duration;
                // 当前时间
                let currentTime;
                if (this.swiperContent.list[swiper.activeIndex].redPacketInfo != null && !this.swiperContent.list[swiper.activeIndex].redPacketInfo.hadReceived) {
                    this.isNotAutoplay = true
                    // this.swiperContent.autoplay = false;
                    this.timeOut = setInterval(() => {
                        // 获取轮播对应的视频
                        let arrVideo = this.$refs.fullVideo;
                        if (arrVideo) {
                            arrVideo.forEach((e, index) => {
                                for (let i in e.$attrs) {
                                    let value = e.$attrs[i];
                                    if (value == swiper.activeIndex) {
                                        this.videoIndex = index
                                        // 当前时间
                                        currentTime = this.$refs.fullVideo[index].$refs.video
                                            .currentTime;
                                        // 总时间
                                        duration = this.$refs.fullVideo[index].$refs.video.duration;
                                    }
                                }
                            });
                        }

                        let arrImg = this.$refs.fullSwiper;
                        let arrImgLength
                        if (arrImg) {
                            arrImg.forEach((e, index) => {
                                for (let i in e.$attrs) {
                                    let value = e.$attrs[i];
                                    if (value == swiper.activeIndex) {
                                        // 当前时间
                                        currentTime = 3;
                                        // 总时间
                                        duration =
                                            this.$refs.fullSwiper[index].FHSwiperMsg.imagesList.length *
                                            3;
                                        arrImgLength = this.$refs.fullSwiper[index].FHSwiperMsg.imagesList.length
                                    }
                                }
                            });
                        }
                        this.$store.commit("setTimeTotal", duration);
                        this.timeAll = Math.round((currentTime / duration) * 100); // 进度条
                        this.$store.commit("setTimeAll", this.timeAll);
                        if (arrImgLength) {
                            this.timeAll = 99
                            this.$store.commit("setTimeAll", this.timeAll);
                            this.imgTimeOut = setTimeout(() => {
                                this.timeAll = 100;
                                this.$store.commit("setTimeAll", this.timeAll);
                            }, duration * 1000);
                            clearInterval(this.timeOut);
                            return
                        } else if (this.timeAll >= 95) {
                            this.timeAll = 100;
                            clearInterval(this.timeOut);
                            this.$store.commit("setTimeAll", this.timeAll);
                        }
                    }, 200);
                }
            }
        },
        // 点击红包后是否弹出红包领取模块
        async newRed (swiperItem) {
            if (this.timeAll != 100) {
                let arr = this.$refs.shake
                arr.forEach((element, index) => {
                    this.$refs.shake[index].handleShake()
                    setTimeout(() => {
                        this.$refs.shake[index].handleShake()
                    }, 1500);
                });
                return false;
            }
            let storeMenuId
            await this.$store.dispatch('getStoreWebsiteMenusApi', this.redEnvelopeData.storeId).then((data) => {
                let tabList = data.list
                tabList.forEach(tabItem => {
                    if (tabItem.menuType == 2) {
                        storeMenuId = tabItem.menuId
                    }
                });
            })

            if (this.userId == 0 && this.thirdId == 0) {
                this.$router.push({ path: '/to/login' });
                return
            }
            if (!XLocation.isOutDistance(this.redEnvelopeData.joinScope)) {
                this.$router.push({
                    path: `/store/promotion/${this.random4Num()}`,
                    query: {
                        storeId: this.redEnvelopeData.storeId,
                        menuType: '2',
                        menuId: storeMenuId,
                        ttn: '6'
                    }
                });
                setTimeout(() => {
                    this.$store.commit("setredAlert", { show: true });
                }, 1000);
            } else {
                MessageBox({
                    title: "无法领取",
                    message: `商家只发放给${this.redEnvelopeData.joinScope}km内的用户`,
                    confirmButtonText: "知道了"
                });
            }
        },
        // 获取处理红包接口的参数
        getredEnvelopeData (swiperIndex) {
            let that = this;
            let redEnvelopeData
            let arrRed = []
            that.swiperContent.list.forEach((e, index) => {
                if (index == swiperIndex) {
                    this.storeId = e && e.belongStoreInfo && e.belongStoreInfo.storeId ? e.belongStoreInfo.storeId + '' : '0'
                    if (e.itemId) {
                        this.mediaId = e.itemId
                    } else if (e.mediaId) {
                        this.mediaId = e.mediaId
                    } else if (e.id) {
                        this.mediaId = e.id
                    } else if (e.promotionId) {
                        this.mediaId = e.promotionId
                    }
                    this.$store.commit("getmediaId", this.mediaId);
                    if (e && e.belongStoreInfo && (e.belongStoreInfo.latitude || e.belongStoreInfo.longitude)) {
                        let currentStore = {
                            latitude: e.belongStoreInfo.latitude,
                            longitude: e.belongStoreInfo.longitude
                        };
                        that.$store.commit("updateCurrentStore", currentStore);
                    }
                    if (e && e.redPacketInfo && e.promotionChannel) {
                        redEnvelopeData = {
                            userId: that.userId,
                            storeId: e.belongStoreInfo.storeId,
                            welPacketId: e.redPacketInfo.welPacketId,
                            promotionId: e.promotionId,
                            terminalType: "6",
                            joinScope: e.promotionChannel.joinScope,
                            title: e.redPacketInfo.title
                        };
                        that.$store.commit("getredEnvelopeData", redEnvelopeData);
                    }
                }
            });
        },
        // 营销红包逻辑结束
        init () {
            this.mediaDeal(this.swiperContent.list);
            /*估价活动助力*/
            this.$emit("initAppraiseHelp", this.swiperContent.list[0]);
        },
        mediaDeal (msg) {
            let tempList = [];
            let tempObj = {};
            for (let data of msg) {
                if (data && data.mediaType == 1) {
                    tempList = [];
                    for (let value of data.mediaContents) {
                        tempList.push(value.url);
                    }
                    tempObj = {
                        imagesList: tempList
                    };
                    this.medioMsg.push(tempObj);
                } else if (data && data.mediaType == 0) {
                    if (data.mediaContents && data.mediaContents[0]) {
                        tempObj = {
                            videoUrl: data.mediaContents[0].url,
                            poster: data.poster
                        };
                    }
                    this.medioMsg.push(tempObj);
                }
            }
        },
        nextSwiperSlide (time = 2000) {
            if (this.swiperTimerout) {
                clearTimeout(this.swiperTimerout);
            }
            /*临时做处理，大师模块不让页面自动轮播到下一个页面去*/
            if (this.isNotAutoplay) {
                return;
            }
            this.swiperTimerout = setTimeout(() => {
                if (this.$refs && this.$refs.mySwiper && this.$refs.mySwiper.swiper) {
                    this.$refs.mySwiper.swiper.slideNext();
                }
            }, time);
        },
        swiperSlideEnd (index, isInit = false) {
            /*进入这里先关掉滑到下一个*/
            this.clearSwiperTimeout();
            let that = this;
            /*轮播之后，对红包优惠券的处理*/
            if (Array.isArray(that.couponsList) && that.couponsList.length > 0) {
                for (let value in that.couponsList) {
                    that.couponsList[value].isShow = false;
                    if (that.$refs.fcSuspension && that.$refs.fcSuspension[value]) {
                        that.$refs.fcSuspension[value].suspension = true;
                        that.$refs.fcSuspension[value].suspensionHide = false;
                    }
                }
                that.couponsList.splice(0, 1, that.couponsList[0]);
            }
            /*轮播之后对视频的处理*/
            if (this.isIphone) {
                $("video").each(function (index, ele) {
                    $("video")
                        .eq(index)[0]
                        .pause();
                });
            }
            if (
                $("#mySwiper>.swiper-wrapper>.swiper-slide")
                    .eq(index)
                    .find("video")
            ) {
                if (this.isIphone) {
                    for (let value in that.$refs.fullVideo) {
                        if (
                            that.$refs.fullVideo &&
                            that.$refs.fullVideo[value] &&
                            that.$refs.fullVideo[value].$attrs["data-videoIndex"] == index
                        ) {
                            that.$refs.fullVideo[value].playVideo();
                        }
                    }
                }
            }
            /*这个加在这里的作用是要在播放视频的时候关掉所有swiper*/
            for (let value in that.$refs.fullSwiper) {
                that.$refs.fullSwiper[value].swiperShow = false;
                if (
                    that.$refs.fullSwiper &&
                    that.$refs.fullSwiper[value] &&
                    that.$refs.fullSwiper[value].$attrs["data-imgIndex"] == index
                ) {
                    that.$refs.fullSwiper[value].swiperShow = true;
                    if (!that.isNotAutoplay) {
                        setTimeout(() => {
                            if (
                                that.$refs.fullSwiper && that.$refs.fullSwiper[value] && that.$refs.fullSwiper[value].swiperMsg &&
                                that.$refs.fullSwiper[value].swiperMsg.imagesList &&
                                that.$refs.fullSwiper[value].swiperMsg.imagesList.length == 1
                            ) {
                                that.nextSwiperSlide(4000);
                            }
                        }, 100);
                    }
                }
            }
        },
        inputFocus (boolean) {
            let that = this;
            // setTimeout(()=>{
            //     $('.img-and-video').css({"position":"fixed",top:0,left:0,overflow:"hidden"})
            // },100)
            // that.$refs.mySwiper.swiper.update()
            //
            // this.$refs.mySwiper.swiper.lockSwipes();
            // if(boolean){
            //     this.$refs.mySwiper.swiper.lockSwipes();
            // }else{
            //     this.$refs.mySwiper.swiper.unlockSwipes();
            // }
            // if(!boolean){
            //     // $('.swiper-wrapper').css({transform: `translate3d(0, - ${heigth * (that.nowSwiperIndex + 1) }, 0)!important`});
            //     $('.swiper-wrapper').css({transform: that.swiperTransformRemember+'!important'});
            // }
        },
        interactModelFn (swiperItem) {
            let tempObj = {};
            let intreractModel = {};
            if (swiperItem && swiperItem.interactModel) {
                tempObj = {
                    isSelf:
                        this.userId ==
                        (swiperItem.belongUserInfo && swiperItem.belongUserInfo.userId
                            ? swiperItem.belongUserInfo.userId
                            : 0),
                    interactId: swiperItem.interactModel.interactId || 0,
                    interactType: swiperItem.interactModel.interactType || 0
                };
                intreractModel = Object.assign({}, swiperItem.interactModel, tempObj);
            }
            return intreractModel;
        },
        getHeaderItem (msg, index) {
            let that = this;
            let tempObj = {
                nowSwiperIndex: 1,
                fullNowSwiperIndex: that.swiperIndex,
                belongSwiperIndex: index,
                headerType: that.swiperContent.headerMsg,
                swiperLength: that.swiperContent.list.length
            };
            return Object.assign({}, msg, tempObj);
        },
        showMarsterClassify (obj) {
            this.$emit("showMarsterClassify", obj);
        },
        isLike (obj) {
            this.$emit("isLike", obj);
        },
        doComment (obj) {
            this.$emit("doComment", obj);
        },
        getSubCommentList (obj) {
            this.$emit("getSubCommentList", obj);
        },
        getUserMainComment (obj) {
            this.$emit("getUserMainComment", obj);
        },
        shareMsg (mediaId) {
            let that = this;
            for (let value of that.rtCommontList) {
                if (mediaId == value.id) {
                    return value;
                }
            }
        },
        isShowHomeTap (boolean) {
            this.$emit("isShowHomeTap", boolean);
        },
        changeEndCb (index) {
            /*swiper滑动时修改swiper的下标*/
            let that = this;
            if (that.$refs.refHeader && that.$refs.refHeader[that.swiperIndex]) {
                that.$refs.refHeader[that.swiperIndex].changeIndex(index);
            }
            if (that.$refs.shareCollectSpeak && that.$refs.shareCollectSpeak[that.swiperIndex]) {
                that.$refs.shareCollectSpeak[that.swiperIndex].nowIndex(index);
            }
            this.$emit('nowIndex', index);
        },
        clickHeaderImg (obj) {
            this.$emit("clickHeaderImg", obj);
        },
        doAttention (concernType, concernKey, key, cb) {
            this.$emit("doAttention", concernType, concernKey, key, cb);
        },
        clickTitle (obj) {
            let that = this;
            if (Array.isArray(this.$refs.topic) && this.$refs.topic.length > 0) {
                that.$refs.topic.forEach((value, index) => {
                    if (
                        that.$refs.topic[index].swiperItem &&
                        that.$refs.topic[index].swiperItem.nowSwiperIndex ==
                        obj.nowSwiperIndex
                    ) {
                        this.isShowHomeTap(false);
                        this.$refs.mySwiper.swiper.lockSwipes();
                        that.$refs.topic[index].showTopic();
                    }
                });
            }
        },
        isNotAutoplayFn (boolean) {
            this.isNotAutoplay = boolean;
            //单独对大师进行处理
            if (this.$route.path.includes('/store/master/')) {
                this.isNotAutoplay = true;
            }
        },
        /*关闭swiper*/
        clearSwiperTimeout () {
            if (this.swiperTimerout) {
                clearTimeout(this.swiperTimerout);
            }
        },
        /*对悬浮图的处理*/
        suspensionDeal (obj) {
            let suspensionProps = {};
            let tempObj = obj;
            if (obj.actIco && obj.actIco.openUrl && obj.actIco.openUrl.indexOf('redpacket_normal') == -1) {
                suspensionProps.image = obj.actIco.openUrl;
            }
            return suspensionProps;
        },
        /*侧边栏隐藏之后的回调*/
        animationCb (obj, index) {
            let that = this;
            /*actType 互动活动*/
            /*不为互动活动*/
            if (obj.actType != 5) {
                this.$emit("animationCb", index);
                this.clearSwiperTimeout();
            } else if (obj.actType == 5 && obj.actInfo.subActType == 5) {
                /*展示估价活动*/
                let tempObj = {
                    actKey: obj.actKey,
                    carrierId: obj.promotionId,
                    show: true
                };
                /*进入这里先关掉滑到下一个*/
                this.isNotAutoplay = true;
                if (this.$refs.appraiseAct) {
                    this.$refs.appraiseAct.forEach((value, appraiseIndex) => {
                        if (
                            obj &&
                            that.$refs.appraiseAct[appraiseIndex] &&
                            that.$refs.appraiseAct[appraiseIndex].swiperItem &&
                            obj.actKey ==
                            that.$refs.appraiseAct[appraiseIndex].swiperItem.actKey &&
                            !!that.$refs.appraiseAct[appraiseIndex].refreshAppraise
                        ) {
                            that.$refs.appraiseAct[appraiseIndex].refreshAppraise(tempObj);
                        }
                    });
                }
                this.isShowHomeTap(false);
                this.userHandleIconsShow = false; //影藏侧边栏
                this.$refs.mySwiper.swiper.lockSwipes();
                // this.$refs.mySwiper.swiper.slides.on('touchmove', function (e) {
                //     e.stopPropagation();
                // },false)
            }
        },
        showAppraise () {
            let that = this;
            setTimeout(() => {
                that.$refs.mySwiper.swiper.unlockSwipes();
                if (that.$refs.appraiseAct) {
                    that.$refs.appraiseAct.forEach((value, index) => {
                        if (that.$refs.appraiseAct[index].appraise) {
                            that.$refs.appraiseAct[index].appraise.show = false;
                        }
                    });
                }
                this.userHandleIconsShow = true;
                this.isShowHomeTap(true);
                this.isNotAutoplay = true;
            }, 1000);
        },
        showPrizeTopic () {
            let that = this;
            setTimeout(() => {
                that.$refs.mySwiper.swiper.unlockSwipes();
                if (Array.isArray(that.$refs.topic) && that.$refs.topic.length > 0) {
                    that.$refs.topic.forEach((value, index) => {
                        if (that.$refs.topic[index].swiperItem) {
                            that.$refs.topic[index].showTopic(false);
                        }
                    });
                }
                this.isShowHomeTap(true);
                this.isNotAutoplay = true;
            }, 1000);
        },
        forbidSwiper (boolean) {
            // if(boolean){
            //     this.$refs.mySwiper.swiper.lockSwipes();
            // }else{
            //     this.$refs.mySwiper.swiper.unlockSwipes();
            // }
            // this.$refs.mySwiper.swiper.lockSwipes();
            // this.$refs.mySwiper.swiper.update()
            // this.$refs.mySwiper.swiper.slideTo(this.swiperIndex,0);
            // this.$refs.mySwiper.swiper.updateAutoHeight();
        },
        async toSwiperIndex (key, isNeedSwilerTo = true) {
            let that = this;
            if (isNeedSwilerTo) {
                await this.$refs.mySwiper.swiper.slideTo(key, 500, false); //切换到第一个slide，速度为1秒
            }
            /*更新定位信息*/
            setTimeout(() => {
                this.currentUserStoreDiscount();
            }, 50)
            this.swiperIndex = key;
            this.swiperSlideEnd(key);
            if (this.$refs.appraiseAct) {
                this.$refs.appraiseAct.forEach((value, index) => {
                    if (that.$refs.appraiseAct &&
                        that.$refs.appraiseAct[index].appraise &&
                        that.$refs.appraiseAct[index].appraise.successAlert
                    ) {
                        this.$refs.appraiseAct[index].appraise.successAlert.show = false;
                    }
                });
            }
            if (key == this.swiperContent.pageSize - 1) {
                this.openHKHWConfirm("查看更多需要下载好看好玩");
            }
            // this.swiperContent.list.forEach((e, index) => {
            //     if (index == key) {
            //         if (e && e.mediaId) {
            //             this.mediaId = e.mediaId;
            //         } else if (e) {
            //             this.mediaId = e.promotionId;
            //         }
            //     }
            // });
            this.getredEnvelopeData(key);
            // this.shareMsg()
            /*多个实景处理*/
            this.dealManyVideoPano(this.$refs.mySwiper.swiper);
        },
        showSuspensionFn (index) {
            if (this.$refs.fcSuspension && this.$refs.fcSuspension[index] && this.$refs.fcSuspension[index].suspensionShowFn) {
                this.$refs.fcSuspension[index].suspensionShowFn();
            }
        },
        suspensionCb (index) {
            this.$emit("suspensionCb", index);
        },
        getAllCounponsFn (Ary, cb) {
            let that = this;
            this.$emit("getAllCounponsFn", Ary, cb);

            function cb () {
                Ary.forEach((item, index) => {
                    for (let value in that.$refs.coupons) {
                        if (
                            item.promotionId == that.$refs.coupons[value].templates[0].promotionId
                        ) {
                            that.$refs.coupons[value].templateHide(index, item);
                        }
                    }
                });
            }
        },
        getTemplate (index, obj, callback) {
            if (!obj) {
                return
            }
            let that = this;
            this.$emit("getTemplate", index, obj, cb);

            function cb () {
                for (let value in that.$refs.coupons) {
                    if (
                        obj.promotionId == that.$refs.coupons[value].templates[0].promotionId
                    ) {
                        that.$refs.coupons[value].templateHide(index, obj);
                    }
                }
                if (callback) {
                    callback();
                }
            }
        },
        showRedAlert (booleanMsg = true) {
            if (!this.userId) {
                this.$router.push("/to/login");
                return;
            }
            this.isShowAlert = booleanMsg;
            if (booleanMsg) {
                this.$store.state.loadingImg = true;
            }
            setTimeout(() => {
                if (this.$refs.getRedAlert) {
                    this.$refs.getRedAlert.redShow = true;
                }
            }, 20);
        },
        openRedPage (obj, callback) {
            this.$emit("openRedPage", obj, callback);
        },
        /*进行估价*/
        doAppraise (number, obj) {
            this.$emit("doAppraise", number, obj);
        },
        /*估价成功更新估价信息*/
        updateAppraiseInfo (obj) {
            if (this.$refs.appraiseAct) {
                this.$refs.appraiseAct.forEach((value, index) => {
                    if (this.$refs.appraiseAct[index].updateAppraiseInfo) {
                        this.$refs.appraiseAct[index].updateAppraiseInfo(obj);
                    }
                });
            }
        },
        dealVideoPanorama (obj) {
            let videoPano = {
                dragDirectionMode: false,
                scenesArr: [
                    {
                        sceneFilePath: obj.url
                    }
                ]
            };
            return videoPano;
        },
        dealVideoPanoramaMsg (obj) {
            if (!obj) {
                return
            }
            let id = 0;
            if (Object.keys(obj).includes("promotionId")) {
                id = obj.promotionId;
            } else if (Object.keys(obj).includes("mediaId")) {
                id = obj.mediaId;
            }
            let videoPano = {
                poster: obj.poster,
                id: id
            };
            return videoPano;
        },
        /*多个实景的处理*/
        dealManyVideoPano (swiper) {
            let that = this;
            if (this.$refs.videoPanorama && this.$refs.videoPanorama.length > 0) {
                let videoPanoramaLength = this.$refs.videoPanorama.length;
                let nowSwiperId = 0;
                if (
                    Object.keys(that.swiperContent.list[swiper.activeIndex]).includes(
                        "promotionId"
                    )
                ) {
                    nowSwiperId = that.swiperContent.list[swiper.activeIndex].promotionId;
                } else if (
                    Object.keys(that.swiperContent.list[swiper.activeIndex]).includes(
                        "mediaId"
                    )
                ) {
                    nowSwiperId = that.swiperContent.list[swiper.activeIndex].mediaId;
                }
                for (let i = 0; i < videoPanoramaLength; i++) {
                    if (that.$refs.videoPanorama[i]) {
                        that.$refs.videoPanorama[i].closeAll();
                        if (
                            that.$refs.videoPanorama[i].videoPanoramaMsg.id == nowSwiperId
                        ) {
                            that.$refs.videoPanorama[i].isShow = true;
                        }
                    }
                }
            }
        },
        wxShareCb (params) {
            this.$emit('wxShareCb', params);
        }
    },
    beforeDestroy () {
        if (this.timeOut) {
            clearInterval(this.timeOut);
        }
    },
    components: {
        "full-height-swiper": () =>
            import("../../commonComponents/swiperComponent/FullHeightSwiper"),
        "full-height-video": FullHeightVideo,
        "fc-suspension": () =>
            import("../../../components/commonActModel/suspension/FcSuspension"),
        "Red-envelope": () =>
            import("../../../components/commonActModel/suspension/RedEnvelope"),
        "full-pamprama": () =>
            import("../../commonComponents/panorama/pic/Panorama"),
        "v-themes": () => import("../../commonActModel/theme/Themes"),

        "user-handle-icons": () => import("../userHandleIcons/UserHandleIcons"),
        "header-msg": () => import("../../commonActModel/header/Header"),
        "coupons-v1": () =>
            import(
                "../../../components/commonActModel/coupons/couponsV_1/CouponsV_1"
            ),
        "no-data": () => import("../../../components/commonActModel/noData/NoData"),
        "get-red-alert": () =>
            import("../../../pages/amusing/components/GetRedAlert"),
        "new-red-alert": () =>
            import("../../../pages/amusing/components/NewRedAlert"),
        "wx-share-body": () => import("../../../components/wx/WxShareBody"),
        "appraise-act": () =>
            import("../../../pages/activity/appraise/ApprasieSuspend"),
        "topic-act": () =>
            import("../../../pages/activity/prizeTopic/PrizeTopicSuspend"),
        "video-panorama": () =>
            import("../../commonComponents/panorama/video/VideoPanorama"),
        "bottom-suspension": () => import("./VideoFloatFooter")
        // 'medio-header': () => import('../../commonActModel/header/Header'),
        // import FullHeightVideo from '../video/FullHeightVideo';
    },
    watch: {
        $route (to, from) {
            this.$router.go(0);
        },
        swiperContentProp (val) {
            this.swiperContent = Object.assign({}, this.swiperContent, val);
        },
        rtCommontListProps (val, oldVal) {
            let that = this;
            val.forEach((value, index) => {
                if (that.rtCommontList[index]) {
                    that.rtCommontList[index] = Object.assign(
                        {},
                        that.rtCommontList[index],
                        value
                    );
                }
            });
        },
        couponsListProp (val) {
            let that = this;
            if (Array.isArray(val) && val.length > 0) {
                val.forEach((value, index) => {
                    that.couponsList.splice(index, 1, value);
                });
            }
        }
    }
};
</script>

<style scoped lang="scss">
@import url($css_root + "css/swiper.min.css");
#noDataWrap /deep/ .no-wcomment {
    background-image: -webkit-linear-gradient(
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0) 100%
    );
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0) 100%
    );
}

.look-index-mood {
    position: absolute;
    bottom: 0;
    font-size: 0.15rem;
    color: #fff;
    padding: 0 0.16rem 0.7rem 0.16rem;
    z-index: 3;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 100%;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.img-and-video /deep/ {
    .couponsV_1 {
        bottom: 0.6rem;
        position: absolute;
        z-index: 1050;
    }

    .swiper-pagination {
        z-index: 20;
        opacity: 1;
        position: absolute;
    }
    .fc-suspension-annimation {
        z-index: 1;
    }
    .fc-suspension {
        position: absolute;
    }
    .swiper-slide {
        height: 100% !important;
    }
}
.animated.zoomOut {
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms; // 动画执行时间
}

.suspension-leave {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.amusing-top-icon {
    height: 0.21rem;
    width: 0.21rem;
    margin-left: 0.1rem;
}

.fc-wtop-icon {
    position: absolute;
    right: 0.2rem;
    top: 0.25rem;
    left: auto;
    bottom: auto;
}

#noDataWrap /deep/ .no-wcomment {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    height: 6.67rem;
    height: 100vh;
    z-index: 1;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>
